<template>
  <q-header bordered class="text-white q-py-none row header">
    <q-toolbar class="q-py-none q-px-md">
      <q-btn flat @click="handleLeftDrawer" round dense icon="menu"/>
      <q-toolbar-title style="width:100px" class="q-ml-sm q-pa-none">
        <!-- <q-avatar>
          <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg">
        </q-avatar> -->
        51提效
      </q-toolbar-title>
      <q-space/>
      <!-- TODO: 全局搜索 -->
      <!-- <q-input outlined dense v-model="keywords" hidden
              label="全站搜索"
              @keydown.enter="handleSearch">
        <template v-slot:prepend>
          <q-btn round dense flat icon="search" class="q-mr-sm" @click="handleSearch"/>
        </template>
      </q-input> -->

      <div class="q-mx-xl row tabs">
        <a href="/km">
          <div class="tab" :class="{visiting: tab.indexOf('/km') > -1}">公共知识库</div>
        </a>
        <!-- <q-route-tab class="tab" to="/apps" name="apps" label="应用搜集"/> -->
        <!-- <q-tab name="english" label="英语学习" /> -->
        <a href="/main">
          <div class="tab" :class="{visiting: tab === '/main'}">个性化桌面</div>
        </a>
      </div>
      <q-icon v-if="$store.state.userInfo.role !== 99" class="cursor-pointer" name="notifications" size="sm"></q-icon>

      <q-btn dense flat no-wrap v-if="$store.state.userInfo.role !== 99" to="/main">
        <q-avatar class="q-ml-xl" size="32px">
          <img src="https://cdn.quasar.dev/img/boy-avatar.png" alt="">
        </q-avatar>
        <!-- <q-icon name="arrow_drop_down" size="16px" /> -->

        <q-menu auto-close>
          <q-list dense flat>
            <!-- <q-item clickable class="">
              <q-item-section>设置</q-item-section>
            </q-item> -->
            <!-- TODO: 切换用户 -->
            <!-- <q-item clickable class=""  @click="logout">
              <q-item-section>退出</q-item-section>
            </q-item> -->
            <!-- <q-btn class="cursor-pointer q-mt-xl" v-if="this.$store.state.userInfo.role !== 99"
            size="sm" v-close-popup label="退出登录"
            @click="logout"></q-btn> -->
          </q-list>
        </q-menu>
      </q-btn>

      <!-- <q-btn dense flat round icon="menu" @click="right = !right" /> -->

    </q-toolbar>

  </q-header>

</template>

<script>
// import iUser from "../api/user";
export default ({
  name: 'LayoutHeader',
  data () {
    return {
      adsShow: false,
      keywords: '',
      tab: this.$route.path
    }
  },
  mounted () {
    console.log(this.$route)
  },
  methods: {
    // async logout() {
    //   await iUser.logout()
    //   await this.$store.dispatch('initUserInfo')
    //   await this.$router.push({name: 'Login'})
    // },
    handleLeftDrawer () {
      this.$emit('handleLeftDrawer', '')
    },
    handleSearch () {
      console.log()
    }
  }
})
</script>

<style lang="scss">

.header {
  height: 50px;
  background-color: $c1;
  // margin: 0;
  // left: 0;
  // top: 0;
  // position: fixed;
  // border-radius: 1px;
  box-shadow: 0 2px 3px rgba($c1, 0.5);
}

.tabs {
  .tab {
    width: 150px;
    height: 47px;
    line-height: 47px;
    text-align: center;
  }

  .visiting {
    padding: 0;
    border-bottom: solid 3px white;
  }

  a, a:visited, a:hover, a:active, a:focus {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
  }
}

@media screen and (max-width: 600px) {
  .tabs {
    display: none;
  }
}

</style>
